<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    text-align: center;
  }
 
  .box {
    background: #333;
    width: 600px;
    height: 400px;
    margin: 56px auto;
  }
 
  /* .main {
    background: url('./60.jpeg');
    margin: auto;
    position: relative;
    width: 487px;
    height: 246px;
    background-size: cover;
    border: 5px solid #333;
    margin: 50px auto;
    -webkit-mask: linear-gradient(90deg, transparent, #fff);
  } */
 
  /* .main {
    background: url('./60.jpeg');
    margin: auto;
    position: relative;
    width: 487px;
    height: 246px;
    background-size: cover;
    border: 5px solid #333;
    margin: 50px auto;
    -webkit-mask: linear-gradient(135deg, transparent 15px, #fff 0) top left,
      linear-gradient(-135deg, transparent 15px, #fff 0) top right,
      linear-gradient(-45deg, transparent 15px, #fff 0) bottom right,
      linear-gradient(45deg, transparent 15px, #fff 0) bottom left;
    -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat;
  } */
 
  .main {
    background: url('./60.jpeg');
    /* background: linear-gradient(0deg, red 0%, yellow 50%, green 75%, blue 80%, transparent); */
    position: relative;
    width: 487px;
    height: 246px;
    background-size: cover;
    border: 1px solid #fff;
    padding: 30px;
    margin: 50px auto;
    /* -webkit-mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%); */
    /* -webkit-mask: linear-gradient(90deg, transparent, #fff); */
    /* -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat; */
 
    -webkit-animation: maskMove 1s linear;
  }
 
 
  @keyframes maskMove {
    0% {
      -webkit-mask: linear-gradient(0deg, #000 0%, transparent 5%, transparent 5%);
    }
 
    10% {
      -webkit-mask: linear-gradient(36deg, #000 10%, transparent 15%, transparent 15%);
    }
 
    20% {
      -webkit-mask: linear-gradient(72deg, #000 20%, transparent 25%, transparent 25%);
    }
 
    30% {
      -webkit-mask: linear-gradient(108deg, #000 30%, transparent 35%, transparent 35%);
    }
 
    40% {
      -webkit-mask: linear-gradient(144deg, #000 40%, transparent 45%, transparent 45%);
    }
 
    50% {
      -webkit-mask: linear-gradient(180deg, #000 50%, transparent 55%, transparent 55%);
    }
 
    60% {
      -webkit-mask: linear-gradient(210deg, #000 60%, transparent 65%, transparent 65%);
    }
 
    70% {
      -webkit-mask: linear-gradient(240deg, #000 70%, transparent 75%, transparent 75%);
    }
 
    80% {
      -webkit-mask: linear-gradient(270deg, #000 80%, transparent 85%, transparent 85%);
    }
 
    90% {
      -webkit-mask: linear-gradient(330deg, #000 90%, transparent 95%, transparent 95%);
    }
 
    100% {
      -webkit-mask: linear-gradient(360deg, #000 100%, transparent 105%, transparent 105%);
    }
  }
 
  .main::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('./1.jpeg');
    -webkit-mask: linear-gradient(0deg, transparent, #000 50%);
    /*-webkit-mask: linear-gradient(90deg, #666 50%, transparent 50%);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
  }
</style>
 
<body>
  <div class="box">
    <p>180deg</p>
    <div class="main"></div>
    <p>0deg</p>
  </div>
 
</body>
 
</html>